<template>
	<div>
		
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
		  <el-breadcrumb-item>管理员列表</el-breadcrumb-item>
		</el-breadcrumb>
		
		<el-card class="box-card">
			
			<el-row :gutter="18">
				  <el-col :span="8">
					  <el-input placeholder="请输入内容" v-model="queryInfo.query_name" @clear="getTableData" class="input-with-select" clearable>				      
						  <el-button slot="append" icon="el-icon-search" @click="getTableData"></el-button>
						</el-input>
				  </el-col>
				  <el-col :span="2">
						<el-button type="info" icon="el-icon-refresh">刷新</el-button>
				  </el-col>
				  <el-col :span="7">
					  <el-button type="primary" icon="el-icon-plus" @click="addVisible=!addVisible">添加</el-button>
				  </el-col>
			</el-row>
			
			<el-table
			      :data="tableData"
			      style="width: 100%">
				  <el-table-column
				    prop="account"
				    label="登录账号"
				    width="180">
				  	</el-table-column>
				  <el-table-column
				    prop="nickname"
				    label="昵称"
				    width="180">
					</el-table-column>
			      <el-table-column
			        prop="role_name"
			        label="角色"
			        width="180">			      			      
			      </el-table-column>
			      <el-table-column
			        prop="status"
			        label="状态">
					<template slot-scope="scope">
					<el-switch
						@change="changeStatus(scope.row.id,$event)"
					  v-model="scope.row.status"
					  :active-value="1"
					  :inactive-value="0"
					  :disabled="scope.row.id==1?true:false"
					  active-color="#13ce66"
					  inactive-color="#ff4949">
					</el-switch>
					</template>
			      </el-table-column>
				  <el-table-column
				    prop="status"
				    label="操作">
				  	<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="编辑" placement="top">
						      <el-button type="success" icon="el-icon-edit" size="mini" @click="editDialog(scope.row)"></el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="删除" placement="top">
						      <el-button type="danger" icon="el-icon-delete" :disabled="scope.row.id==1?true:false" size="mini" @click="del(scope.row)"></el-button>
						</el-tooltip>
				  	</template>
				  </el-table-column>
			    </el-table>
				
				
				<div class="page" align="left">
				<el-pagination
				  @size-change="handleSizeChange"
				  @current-change="handleCurrentChange"
				  :current-page="queryInfo.page_num"
				  :page-sizes="[10, 20, 30, 40]"
				  :page-size="queryInfo.page_size"
				  layout="total, sizes, prev, pager, next, jumper"
				  :total="total">
				</el-pagination>
			  </div>
			
		</el-card>
		
		<!-- 添加管理员 -->
		<el-dialog
		  title="添加管理员"
		  :visible.sync="addVisible"
		  align="left"
		  @close="closeAddDialog"
		  width="50%">
		  
		  <el-form :model="addForm" :rules="addFormRul" ref="addFormRef" label-width="100px">
			  
		      <el-form-item label="登录账号" prop="account" >
		        <el-input v-model="addForm.account" autocomplete="off"></el-input>
		      </el-form-item>
			  <el-form-item label="登录密码"  prop="password" >
			    <el-input v-model="addForm.password" type="password" autocomplete="off"></el-input>
			  </el-form-item>
			  
		      <el-form-item label="所属角色" prop="role_id" >
		        <el-select v-model="addForm.role_id" placeholder="请选择角色">
		          <el-option v-for="item in roleData" :key="item.name"
				   :label="item.name"
					:value="item.id">
				  </el-option>
		        </el-select>
		      </el-form-item>
			  
			  <el-form-item label="昵称" prop="nickname" >
			    <el-input v-model="addForm.nickname" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="邮箱" prop="email" >
			    <el-input v-model="addForm.email" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="状态" prop="status">
			      <el-switch 
				  :active-value="1"
				  :inactive-value="0"
				  active-color="#13ce66"
				  inactive-color="#ff4949"
				  v-model="addForm.status"></el-switch>
			  </el-form-item>			  
			  
		    </el-form>		  
		  
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addVisible = false">取 消</el-button>
		    <el-button type="primary" @click="add" >确 定</el-button>
		  </span>
		</el-dialog>
		
		<!-- 修改管理员 -->
		<el-dialog
		  title="修改管理员"
		  :visible.sync="editVisible"
		  align="left"		  
		  width="50%">
		  
		  <el-form :model="editForm" :rules="editFormRul" ref="editFormRef" label-width="100px">
			  
		      <el-form-item label="登录账号" >
		        <el-input v-model="editForm.account" disabled></el-input>
		      </el-form-item>
			  <el-form-item label="登录密码"  prop="password" >
			    <el-input v-model="editForm.password" type="password" autocomplete="off"></el-input>
			  </el-form-item>
			  
		      <el-form-item label="所属角色" prop="role_id" >
		        <el-select v-model="editForm.role_id" :disabled="editForm.id==1?true:false" placeholder="请选择角色">
		          <el-option v-for="item in roleData" :key="item.name"
		      				   :label="item.name"
		      					:value="item.id">
		      				  </el-option>
		        </el-select>
		      </el-form-item>
			  
			  <el-form-item label="昵称" prop="nickname" >
			    <el-input v-model="editForm.nickname" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="邮箱" prop="email" >
			    <el-input v-model="editForm.email" autocomplete="off"></el-input>
			  </el-form-item>
			  <el-form-item label="状态" prop="status">
			      <el-switch 
				  :active-value="1"
				  :inactive-value="0"
				  :disabled="editForm.id==1?true:false"
				  active-color="#13ce66"
				  inactive-color="#ff4949"
				  v-model="editForm.status"></el-switch>
			  </el-form-item>			  
			  
		    </el-form>		  
		  
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editVisible = false">取 消</el-button>
		    <el-button type="primary" @click="edit" >确 定</el-button>
		  </span>
		</el-dialog>
		
	</div>
</template>

<script>
export default {
	data(){
		var checkEmail = (rule, value, callback) => {
		    const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
		    if (!value) {
		      return callback(new Error('邮箱不能为空'))
		    }
		    setTimeout(() => {
		      if (mailReg.test(value)) {
		        callback()
		      } else {
		        callback(new Error('请输入正确的邮箱格式'))
		      }
		    }, 100)
		  }
		return {
			tableData: [],
			roleData:[],
			queryInfo:{
				query_name:'',
				page_num:0,
				page_size:0
			},
			total:0,
			addVisible:false,
			editVisible:false,
			addForm: {
				  account: '',
				  password: '',
				  role_id: '',				  
				  nickname: '',
				  email: '',
				  status: ''
				},
			addFormRul:{
				account:[
					{ required: true, message: '请输入账号！', trigger: 'blur'},
					{ min: 5, max: 25, message: '长度在 5 到 25 个字符', trigger: 'blur'}
				],
				role_id:[
					{ required: true, message: '请选择角色！', trigger: 'blur'}
				],
				password:[
					{ required: true, message: '请输入密码！', trigger: 'blur' },
					{ min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
				],				
				nickname:[
					{ required: true, message: '请输入昵称！', trigger: 'blur'},
					{ min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
				],
				email:[
					{ required: true,validator:checkEmail, trigger: 'blur'}
				],
			},
			editForm: {
				  id:'',
				  account: '',
				  password: '',
				  role_id: '',				  
				  nickname: '',
				  email: '',
				  status: ''
			},
			editFormRul:{				
				role_id:[
					{ required: true, message: '请选择角色！', trigger: 'blur'}
				],
				password:[
					{ required: false, message: '请输入密码！', trigger: 'blur' },
					{ min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
				],				
				nickname:[
					{ required: true, message: '请输入昵称！', trigger: 'blur'},
					{ min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
				],
				email:[
					{ required: true,validator:checkEmail, trigger: 'blur'}
				],
			},
		}
	},
	methods: {
		//获取管理员列表
		getTableData(){
			//进页面不传分页参数
			var params = {};
			if(this.queryInfo.page_num>0) params = {params:this.queryInfo};
			
			this.$http.get('admin',params).then(res => {
				if(res.data.code !==200) return this.$message.error(res.data.msg);
				this.tableData = res.data.data.data;
				this.total = res.data.data.total;		
				this.queryInfo.page_num = res.data.data.current_page;
				this.queryInfo.page_size = res.data.data.per_page;
				console.log(res);
			});
		},
		handleSizeChange(newSize){
			this.queryInfo.page_size = newSize;
			this.getTableData();
		},
		handleCurrentChange(curPage){
			this.queryInfo.page_num = curPage;
			this.getTableData();
		},
		changeStatus(id,status){
			this.$http.put(`admin/${id}/state/${status}`).then(res =>{
				if(res.data.code !==200){
					this.getTableData();
					return this.$message.error(res.data.msg);
				}else{					
					return this.$message.success(res.data.msg);
				}
			});
		},
		//提交添加数据
		add(){
			this.$refs.addFormRef.validate(valid => {
				if(!valid) return this.$message.error("请输入正确的信息！");
				this.$http.post('admin',this.addForm).then(res =>{
					if(res.data.code === 200){
						this.$message.success(res.data.msg);
						this.addVisible = !this.addVisible;
						this.getTableData();
					}else{
						this.$message.error(res.data.msg);
					}					
				});
				
			});
			
		},
		closeAddDialog(){
			this.$refs.addFormRef.resetFields();
		},
		//打开修改管理员弹窗
		editDialog(row){
			this.editForm.account = row.account;
			this.editForm.role_id = row.role_id;
			this.editForm.nickname = row.nickname;
			this.editForm.email = row.email;
			this.editForm.status = row.status;
			this.editForm.id = row.id;
			this.editVisible = true;
		},
		//提交修改数据
		edit(){
			this.$refs.editFormRef.validate(valid => {
				if(!valid) return this.$message.error("请输入正确的信息！");
				this.$http.put(`admin/${this.editForm.id}`,this.editForm).then(res =>{
					if(res.data.code === 200){
						this.$message.success(res.data.msg);
						this.editVisible = !this.editVisible;
						this.getTableData();
					}else{
						this.$message.error(res.data.msg);
					}
					
					console.log(res);
				});
				
			});
		},
		//删除管理员
		del(row) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
			  confirmButtonText: '确定',
			  cancelButtonText: '取消',
			  type: 'warning'
			}).then(() => {
				this.$http.delete(`admin/${row.id}`).then(res=>{
					if(res.data.code === 200){
						this.$message.success(res.data.msg);
						this.getTableData();
					}else{
						this.$message.error(res.data.msg);
					}
				});			  
			}).catch(() => {
			  this.$message({
				type: 'info',
				message: '已取消删除'
			  });          
			});
		},
		//获取角色列表
		getGroupData(){
			this.$http.get('role').then(res => {
				if(res.data.code !==200) return this.$message.error(res.data.msg);
				this.roleData = res.data.data;
				console.log(this.roleData);
			});
		}
	},
	created(){
		this.getTableData();
		this.getGroupData();
	}
	
}	
</script>

<style>
</style>
